﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Selector - Form Filter</title>
    <script src="script/jquery-1.3.2.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            // filter input
            var allInputs = $(":input");
            var formChildren = $("form > *");
            $("#jumlahInput").text("Found " + allInputs.length + " inputs and the form has " +
                             formChildren.length + " children.")
            .css("color", "red");

            // filter button
            $(":button").css({ background: "yellow", border: "3px red solid" });

            // filter checkbox
            $(":checkbox").css({ background: "yellow", border: "3px red solid" });

            // filter file
            $(":file").css({ background: "yellow", border: "3px red solid" });

            // filter hidden
            $("#jumlahHidden").text("Found " + $("input:hidden").length + " hidden inputs.").css("color", "red");

            // filter image
            $(":image").css({ background: "yellow", border: "3px red solid" });

            // filter password
            $(":password").css({ background: "yellow", border: "3px red solid" });

            // filter radio
            $(":radio").css({ background: "yellow", border: "3px red solid" });

            // filter reset
            $(":reset").css({ background: "yellow", border: "3px red solid" });

            //filter submit
            $(":submit").css({ background: "yellow", border: "3px red solid" });

            // filter text
            $(":text").css({ background: "yellow", border: "3px red solid" }); 
        });
    </script>
</head>
<body>
<form> 
    <input type="button" value="Input Button"/> 
    <input type="checkbox" /> 
 
    <input type="file" /> 
    <input type="hidden" /> 
    <input type="image" /> 
 
    <input type="password" /> 
    <input type="radio" /> 
    <input type="reset" /> 
 
    <input type="submit" /> 
    <input type="text" /> 
    <select><option>Option<option/></select> 
 
    <textarea></textarea> 
    <button>Button</button> 
  </form> 
   <div id="jumlahInput"></div>
   <br />
   <div id="jumlahHidden"></div>
</body>
</html>
